<template>
        <div class="picture_item" >
           <div class="imgBox">
               <img :src='item.imgUrl' alt="" srcset=''>
           </div>
           <div class="text">
               <span>作者:{{item.name}}</span>
               <span>{{item.time}}</span>
           </div>
       </div>
</template>

<script>
    export default {
        name:'ImageItem',
        props:['item']
    }
</script>

<style scoped lang='scss'>
      .picture_item{
         width: 16%;
         height: 300px;
         box-shadow: 0px 0px 23px -5px #333;
         margin: 0px 20px 20px 0px;
         cursor: pointer;
         &:hover{
             box-shadow: 0px 0px 23px 2px #333;
         }
         .imgBox{
             width: 100%;
             height: 90%;
             background: rgb(63, 57, 57);
             img{
                 width: 100%;
                 height: 100%;
             }
         }
         .text{
           height: 10%;
           padding: 6px;
           display: flex;
           flex-flow: row nowrap;
           justify-content: space-between;
           
         }
     }
</style>